// 权限控制 [路由跳转控制  菜单权限控制 ] 
// 应用启动 权限控制立刻生效
// main.js 初始化的时 立刻执行以下 permission.js

// 模块化 exort import 直接导入js 会被立刻执行

// console.log('权限执行了');
// 在permission编写各种权限逻辑的模块中，并且让权限控制在应用启动的时候就开启生效。
import store from "./store";
console.log(store);
import router from "@/router";
import { getToken } from "@/utils/auth";
//引进进度条
import NProgress  from "nprogress";
import 'nprogress/nprogress.css';//配套的进度条样式样式  
// 动态路由表
import { asyncRoutes } from '@/router/asyncRoutes'

// 白名单
const WHITELIST = ['/login', '/404']
router.beforeEach(async (to, from, next) => {
  // 开启进度条
  NProgress.start();
  /* 
  to:跳转到目标路由对象
  from：来源路由对象
  next：放行函数 可执行的函数  
  */
  // 获取token 
  const token = getToken()//本地获取
  // 判断是否有token
  if(token) {
    // 判断是否是登录页
    if(to.path === '/login'){
      // 跳到主页
      next('/')
    }else {
      // 这里！！！最合适 触发acyion函数
      // 放行
      next()
      /* 
      问题：因为请求是放在了拦截器里每次路由跳转就会有重复的请求
      解决方案：如果已经请求过 就不要在请求了
      这个请求结束之后 vuex中存入了userInfo 就可以userInfo.userId做一个判断条件
      */
    if(!store.state.user.userInfo.userId) {
      const res = await store.dispatch('user/fetchUserInfo')
      // 权限控制
      // 1.拿到当前用户user的menus权限数据 以及 所有的动态路由表
      // console.log(res, asyncRoutes);
      const menus = res.roles.menus
      // 2.已menus（个人权限菜单数据）为主对asyncRoutes做过滤 [filter]找到符合条件的项 
      // 路由的name能否在menus中找到 可以找到就是符合条件
      // console.log('菜单权限数据和动态路由',menus, asyncRoutes);
      let filterMenus = asyncRoutes.filter((route) => {
        return menus.includes(route.children[0].name)
      })
      // console.log('根据权限过滤后的路由表为',filterMenus);
      // 3.动态添加路由 拔筛选出来的有资格的路由添加到路由系统中
      // 让访问 path的时候可以渲染组件
      router.addRoutes(filterMenus)
      // 电泳store的方法拔过滤之后的动态路由表加入
      store.commit('menu/setMenuList', filterMenus)
    }
    }
  }else{
    // tokne 不存在 判断是否为白名单
    if(WHITELIST.includes(to.path)){ 
      // 在白名单 放行
      next()
    }else {
      // 不是白名单跳到登陆页
      next('/login')
    }
  }
  // 关闭进度条
  NProgress.done()
}) 



/* 
在 js里面 如何触发action函数 
引进store
store.dispath('模块名/函数名')
*/
/* 
放在这最合适的原因：
用户数据的获取位置很值的思考，其一用户资料的获取依赖于token，其二在跳转首页之后需要立刻获取，其三点击左侧菜单时刷新需要保证用户信息还在，
其四用户资料里还包含我们将来要做的菜单权限数据，综上，`最合适触发action函数发送请求的位置就是permisson.js模块中跳转到首页的地方`
*/